{% extends "base/base.html" %}

{% block content %}
    <div class="col-md-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>任务信息</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Settings 1</a>
                            </li>
                            <li><a href="#">Settings 2</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <br />
                <div class="row">

                    <div class="form-horizontal form-label-left col-md-3">

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">任务名称:</label>
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">{{ object.name }}</label>
                        </div>
                    </div>
                    <div class="form-horizontal form-label-left col-md-3">

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">任务分类:  </label>
                            <label class="control-label col-sm-4">{{ object.type }}</label>
                        </div>
                    </div>
                    <div class="form-horizontal form-label-left col-md-3">


                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">任务类型:</label>
                            <label class="control-label col-sm-4">{{ object.category_name }}</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-horizontal form-label-left col-md-4">
                        <br />
                        <div >
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">任务描述:</label>
                            <label class="control-label col-md-8 col-sm-8 col-xs-12 ">{{ object.desc }}</label>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="form-horizontal form-label-left col-md-3">
                        <div class="form-group">
                            <a class="btn btn-success" href="/job/task/edit/{{ object.id }}/">编辑</a>
                        </div>
                    </div>
                    <div class="form-horizontal form-label-left col-md-3">
                        <div class="form-group">
                            <a class="btn btn-success" href="/job/task/run/{{ object.id }}/">执行任务</a>
                        </div>
                    </div>
                <div class="form-horizontal form-label-left col-md-3">
                    <div class="form-group">
                        <div class="btn-group">
                          <button type="button" class="btn btn-success">Action</button>
                          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu" role="menu">
                            <li class="divider"></li>
                            <li><a href="#">删除作业</a>
                            </li>
                          </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>任务执行记录</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Settings 1</a>
                            </li>
                            <li><a href="#">Settings 2</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <p class="text-muted font-13 m-b-30">
                </p>
                <table id="task" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>任务id</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>任务描述</th>
                        <th>当前状态</th>
                        <th>查看任务</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script>
    var table = '';
    function taskTable() {
        //提示信息
        var lang = {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 项",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页",
                "sJump": "跳转"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };



        //初始化表格
        table = $("#task").dataTable({
            language:lang,  //提示信息
            autoWidth: false,  //禁用自动调整列宽
            stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
            processing: true,  //隐藏加载提示,自行处理
            serverSide: true,  //启用服务器端分页
            searching: false,  //禁用原生搜索
            orderMulti: false,  //启用多列排序
            order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
            renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
            pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
            columnDefs: [{
                "targets": 'nosort',  //列的样式名
                "orderable": false    //包含上样式名‘nosort’的禁止排序
            }],
            ajax: function (data, callback, settings) {
                //封装请求参数
                var param = {};
                param.page = (data.start / data.length)+1;//当前页码
                param.type = $("#task-type").val()
                param.category = $("#category").val()
                param.task_id = {{ object.id }}
                // console.log(param);
                //ajax请求数据
                $.ajax({
                    type: "GET",
                    url: "/job/task/log/{{ object.id }}/",
                    cache: false,  //禁用缓存
                    data: param,  //传入组装的参数
                    dataType: "json",
                    success: function (result) {
                        //console.log(result);
                        //setTimeout仅为测试延迟效果
                        setTimeout(function () {
                            //封装返回数据
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.total;//返回数据全部记录
                            returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.result;//返回的数据列表
                            //console.log(returnData);
                            //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                            //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        }, 200);
                    }
                });
            },
            //列表表头字段
            columns: [
                { "data": "name" },
                { "data": "type" },
                { "data": "category" },
                { "data": "id" }
            ],
            "aoColumns": [
                { "sTitle":"任务id", "mDataProp": "celery_task_id","sClass":"center"},
                {"sTitle":"任务描述", "mDataProp": "desc","sClass":"center"},
                { "sTitle":"任务状态", "mDataProp": "status","sClass":"center",
                    "mRender": function(date, type, full) {
                        switch (full.status) {
                            case 'QUEUE':
                                return '<button type="button" class="btn btn-round btn-default">队列中</button>'
                            case 'PENDING':
                                return '<button type="button" class="btn btn-round btn-warning">阻塞中</button>'
                            case 'STARTED':
                                return '<button type="button" class="btn btn-round btn-info">执行中</button>'
                            case 'SUCCESS':
                                return '<button type="button" class="btn btn-round btn-success">成功</button>'
                            case 'FAILURE':
                                return '<button type="button" class="btn btn-round btn-danger">失败</button>'
                            case 'RETRY':
                                return '<button type="button" class="btn btn-round btn-info">重试中</button>'
                            case 'REVOKED':
                                return '<button type="button" class="btn btn-round btn-danger">取消</button>'
                        }
                        return full.status
                    }
                },
                {"sTitle":"开始时间", "mDataProp": "update_time","sClass":"center",
                    "mRender": function(date, type, full) {
                        console.log(full.update_time)
                        console.log('update time')
                        return (moment(full.update_time)).format('YYYY年M月D日 H时m分s秒')
                    }
                },
                { "sTitle":"最后更新时间", "mDataProp": "create_time","sClass":"center",
                    "mRender": function(data, type, full) {
                        console.log(full.create_time)
                        console.log('create time')
                        return (moment(full.create_time)).format('YYYY年M月D日 H时m分s秒')
                    }
                },
                {
                    "sTitle": "操作", "mDataProp": "id", "sClass": "center",
                    "mRender": function (data, type, full) {
                        return '<a class="btn btn-success btn-sm" href=/job/task/result/' + full.id + '>' + '查看任务' + '</a>';
                    }
                }]
        }).api();
        //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
    }
    $(document).ready(taskTable())
    $("#searchButton").click(function () {
        table.ajax.reload()
    })
    </script>
{% endblock %}